<script setup lang="ts">
import type { orderInfo } from '@/types/order'
import { inject } from 'vue'

defineProps<{
  item: orderInfo
}>()
const emits = defineEmits<{
  (e: 'editAddress', info: orderInfo, icon?: string): void
}>()
// 接收爷组件传过来的图标
const icon = inject<string>('icon')
</script>

<template>
  <div class="item">
    <div class="left">
      <p class="top">
        <span class="name">{{ item.receiver }}</span>
        <span class="tel">{{ item.mobile }}</span>
        <van-tag plain type="primary">默认</van-tag>
      </p>
      <p class="addr">{{ item.addressDetail }}</p>
    </div>
    <div class="right">
      <van-icon
        size="20"
        :name="icon"
        @click="emits('editAddress', item, icon)"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  align-items: center;
  border-bottom: 1px solid rgb(242, 238, 238, 0.6);
  .top {
    margin-top: 5px;
    .name {
      font-weight: 600;
    }
    .tel {
      margin: 0 5px;
      color: var(--cp-dark);
    }
  }
  .addr {
    margin: 10px 0;
  }
}
</style>
